<template>
  <div class="base-info-container">
    <div class="user-info-box" id="userInfoBox">
      <div class="header">
        <span class="member-info-label">
          {{ $t('msg.member.blanceRechargeMoney') }}
          <!-- <span class="member-info-content">{{ memberFrom.realName }}</span> -->
          <span class="member-info-content">{{
            $filters.moneyFilterShow(memberData.balanceMoney)
          }}</span>
        </span>
        <span class="member-info-label">
          {{ $t('msg.member.blancePresentMoney') }}
          <!-- <span class="member-info-content">{{ memberFrom.points }}</span> -->
          <span class="member-info-content">{{
            $filters.moneyFilterShow(memberData.presentBalanceMoney)
          }}</span>
        </span>
        <span class="last-recharge-time">
          {{ $t('msg.member.lastRechargeTime') }}
          <span class="member-info-time">{{
            $filters.rechargeDateFilter(memberData.lastRechargeTime)
          }}</span>
        </span>
      </div>
      <div class="accumulate">
        <span class="member-info-label">
          {{ $t('msg.member.accumulateRechargeMoney') }}
          <!-- <span class="member-info-content">{{ memberFrom.realName }}</span> -->
          <span class="member-info-content">{{
            $filters.moneyFilterShow(memberData.rechargeMoney)
          }}</span>
        </span>
        <span class="member-info-label">
          {{ $t('msg.member.accumulatePresentMoney') }}
          <span class="member-info-content">{{
            $filters.moneyFilterShow(memberData.presentMoney)
          }}</span>
        </span>
        <span class="member-info-label">
          {{ $t('msg.member.accumulateConsumeMoney') }}
          <!-- <span class="member-info-content">{{ memberFrom.points }}</span> -->
          <span class="member-info-content">{{
            $filters.moneyFilterShow(memberData.consumeMoney)
          }}</span>
        </span>
      </div>
      <div class="table-container">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column label="#" type="index"></el-table-column>
          <!-- 类型 -->
          <el-table-column
            :label="$t('msg.member.tableActionType')"
            align="center"
            width="80px"
          >
            <template #default="{ row }">
              {{ $filters.feeOperateType(row.type) }}
            </template>
          </el-table-column>
          <!-- 姓名 -->
          <el-table-column :label="$t('msg.member.tableMoney')" align="center">
            <template #default="{ row }">
              {{ $filters.moneyFilterShow(row.relatedMoney) }}
              <span
                style="color: rgba(0, 0, 0, 0.5); font-size: 10px"
                v-if="row.type === 0"
                >({{ $filters.payTypeShow(row.payType) }})</span
              >
            </template>
          </el-table-column>
          <!-- 手机号 -->
          <el-table-column
            :label="$t('msg.member.tablePresent')"
            align="center"
            width="100px"
          >
            <template #default="{ row }">
              {{ $filters.moneyFilterShow(row.presentMoney) }}
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('msg.member.tableOperator')"
            prop="createUser"
            align="center"
          ></el-table-column>
          <el-table-column
            :label="$t('msg.member.tableOperateTime')"
            align="center"
            width="140px"
          >
            <template #default="{ row }">
              {{ $filters.rechargeDateFilter(row.createTime) }}
            </template>
          </el-table-column>
          <!-- 索引 -->
          <el-table-column
            :label="$t('msg.member.tableRemark')"
            prop="remark"
            align="center"
          ></el-table-column>
        </el-table>
        <el-pagination
          class="pagination"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-size="size"
          :total="total"
          :page-sizes="[10]"
          layout="total,sizes,prev,pager,next,jumper"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script setup>
import { watch, ref, defineProps } from 'vue'
import { feeRecord } from '@/api/member'
const props = defineProps({
  memberInfo: {
    type: Object,
    required: true
  }
})
const memberData = ref({ ...props.memberInfo })

const page = ref(1)
const size = ref(10)
const total = ref(0)
const tableData = ref([])
const handleSizeChange = (val) => {
  size.value = val
  getFeeRecord()
}
const handleCurrentChange = (val) => {
  page.value = val
  getFeeRecord()
}
const getFeeRecord = async () => {
  const result = await feeRecord({
    memberId: props.memberInfo.id,
    page: page.value,
    size: size.value
  })
  if (result) {
    tableData.value = result.items
    total.value = result.total
  }
}
getFeeRecord()

watch(
  () => props.memberInfo,
  (newValue) => {
    memberData.value = { ...newValue }
    getFeeRecord() // 当 memberInfo 变化时重新加载表格数据
  },
  { deep: true, immediate: true }
)
</script>

<style lang="scss" scoped>
.base-info-container {
  text-align: center;
  min-height: 500px;
  .user-info-box {
    width: 800px;
    margin: 0 auto;
    .header {
      width: 100%;
      display: flex;
      height: 80px;
      justify-self: center;
      align-items: center;
      flex-direction: row;

      .member-info-label {
        font-size: 14px;
        flex: 1;
      }
      .member-info-content {
        font-size: 24px;
        font-weight: bold;
        color: #ff6900;
      }
      .last-recharge-time {
        flex: 1;
        font-size: 14px;
        color: #9f9f9f;
      }
    }
    .accumulate {
      border-top: 1px solid #d4d4d4;
      border-bottom: 1px solid #d4d4d4;
      width: 100%;
      display: flex;
      height: 80px;
      justify-self: center;
      align-items: center;
      flex-direction: row;
      .member-info-label {
        font-size: 14px;
        flex: 1;
      }
      .member-info-content {
        color: #00a0e9;
      }
    }
    .table-container {
      margin-top: 20px;
    }
    .pagination {
      display: flex;
      margin-top: 20px;
      justify-content: center;
    }
  }
}
</style>
